<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">

    <link rel="stylesheet" href="../css/plugins.reset.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/icon.css">
    <link rel="stylesheet" href="../css/home.css">
</head>
<body class="loaded bg-gray">
<div class="wrapper">
    <header class="header">
        <div class="logo pull-left">
            <a href="index.html" target="_self" title="首页">
                LOGO
            </a>
        </div>
        <div class="header-signin pull-right">
            <a href="#" id="js-signin-btn">登录</a>
            /
            <a href="#" id="js-signup-btn">注册</a>
        </div>
    </header>
    <div class="content-wrapper">
        <div class="bk" style='background-image: url("//img.mukewang.com/5a55f2c90001b28b09360316.jpg");'></div>
        <section class="bg-fff">
            <div class="container clearfix">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="banner-wrapper">
                            <div class="menu-wrapper">
                                <div class="menu">
                                    <div class="item" data-id="a">
                                        <a href="#" target="_blank">
                                            <span class="group">前端开发</span>
                                            <i class="fa fa-chevron-right"></i>
                                        </a>
                                    </div>
                                    <div class="item" data-id="b">
                                        <a href="#" target="_blank">
                                            <span class="group">后端开发</span>
                                            <i class="fa fa-chevron-right"></i>
                                        </a>
                                    </div>
                                    <div class="item" data-id="c">
                                        <a href="#" target="_blank">
                                            <span class="group">移动开发</span>
                                            <i class="fa fa-chevron-right"></i>
                                        </a>
                                    </div>
                                    <div class="item" data-id="d">
                                        <a href="#" target="_blank">
                                            <span class="group">数据库</span>
                                            <i class="fa fa-chevron-right"></i>
                                        </a>
                                    </div>
                                    <div class="item" data-id="e">
                                        <a href="#" target="_blank">
                                            <span class="group">云计算&amp;大数据</span>
                                            <i class="fa fa-chevron-right"></i>
                                        </a>
                                    </div>
                                    <div class="item" data-id="f">
                                        <a href="#" target="_blank">
                                            <span class="group">运维&amp;测试</span>
                                            <i class="fa fa-chevron-right"></i>
                                        </a>
                                    </div>
                                    <div class="item" data-id="g">
                                        <a class="bbn" href="#" target="_blank">
                                            <span class="group">UI设计</span>
                                            <i class="fa fa-chevron-right"></i>
                                        </a>
                                    </div>
                                </div>
                                <div class="submenu-wrapper">
                                    <div class="submenu" data-id="a">
                                        <div class="innerBox">
                                            <div class="subinnerBox">
                                                <div class="cates-box">
                                                    <div class="fe-base-box">
                                                        <div class="banner-line">
                                                            <span class="bold mr10 pull-left small-title">基础</span>
                                                        </div>
                                                        <div class="tag-box pull-left">
                                                            <a target="_blank" href="#">HTML/CSS</a>
                                                            <a target="_blank" href="#">JavaScript</a>
                                                            <a target="_blank" href="#">jQuery</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="recomment-box">
                                            <div class="pull-left banner-course-card">
                                                <a href="//class.imooc.com/sc/25?mc_marking=26dd86266f55cfc7a3b8b624af302664&amp;mc_channel=qianduankaifa1" target="_blank" title="前端进阶：响应式开发与常用框架" class="clearfix">
                                                    <img src="//climg.mukewang.com/5915802b0001da6206000338.jpg" class="pull-left">
                                                    <div class="pull-left course-card">
                                                        <h3 class="course-card-name">前端进阶：响应式开发与常用框架</h3>
                                                        <div class="course-card-info">
                                                            <span>职业路径</span><span>5步／30课</span><span><i class="icon-set_sns"></i>578</span>
                                                        </div>
                                                        <div class="course-card-price">￥599.00</div>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="pull-left banner-course-card">
                                                <a href="//class.imooc.com/sc/25?mc_marking=26dd86266f55cfc7a3b8b624af302664&amp;mc_channel=qianduankaifa1" target="_blank" title="前端进阶：响应式开发与常用框架" class="clearfix">
                                                    <img src="//climg.mukewang.com/5915802b0001da6206000338.jpg" class="pull-left">
                                                    <div class="pull-left course-card">
                                                        <h3 class="course-card-name">前端进阶：响应式开发与常用框架</h3>
                                                        <div class="course-card-info">
                                                            <span>职业路径</span><span>5步／30课</span><span><i class="icon-set_sns"></i>578</span>
                                                        </div>
                                                        <div class="course-card-price">￥599.00</div>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="pull-left banner-course-card">
                                                <a href="//class.imooc.com/sc/25?mc_marking=26dd86266f55cfc7a3b8b624af302664&amp;mc_channel=qianduankaifa1" target="_blank" title="前端进阶：响应式开发与常用框架" class="clearfix">
                                                    <img src="//climg.mukewang.com/5915802b0001da6206000338.jpg" class="pull-left">
                                                    <div class="pull-left course-card">
                                                        <h3 class="course-card-name">前端进阶：响应式开发与常用框架</h3>
                                                        <div class="course-card-info">
                                                            <span>职业路径</span><span>5步／30课</span><span><i class="icon-set_sns"></i>578</span>
                                                        </div>
                                                        <div class="course-card-price">￥599.00</div>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="pull-left banner-course-card">
                                                <a href="//class.imooc.com/sc/25?mc_marking=26dd86266f55cfc7a3b8b624af302664&amp;mc_channel=qianduankaifa1" target="_blank" title="前端进阶：响应式开发与常用框架" class="clearfix">
                                                    <img src="//climg.mukewang.com/5915802b0001da6206000338.jpg" class="pull-left">
                                                    <div class="pull-left course-card">
                                                        <h3 class="course-card-name">前端进阶：响应式开发与常用框架</h3>
                                                        <div class="course-card-info">
                                                            <span>职业路径</span><span>5步／30课</span><span><i class="icon-set_sns"></i>578</span>
                                                        </div>
                                                        <div class="course-card-price">￥599.00</div>
                                                    </div>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="banner-content">
                                <div class="banner-images">
                                    <a href="#">
                                        <img src="//img.mukewang.com/5a55f2c90001b28b09360316.jpg" alt="">
                                    </a>
                                </div>
                                <div class="banner-control">
                                    <div class="banner-dots"></div>
                                    <a href="javascript:" class="banner-prev"></a>
                                    <a href="javascript:" class="banner-next"></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="bg-fff">
            <div class="section-title">
                <i class="title-icon title-icon-1-l title-icon-l"></i>实 战 推 荐<i class="title-icon title-icon-1-r title-icon-r"></i>
            </div>
            <div class="container clearfix">
                <div class="row">
                    <div class="per-20-div">
                        <div class="exam-widget">
                            <div class="exam-widget-heading">
                            <span class="exam-widget-tag">
                                <label>Java</label>
                                <label>Android</label>
                            </span>
                            </div>
                            <div class="exam-widget-body">
                                <div class="exam-widget-title">
                                    <a href="#">Android课程考试</a></div>
                                <div class="exam-widget-info">
                                    <i class="fa fa-clock-o"></i>1小时59分钟21秒<span class="pull-right text-info">进行中</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="per-20-div">
                        <div class="exam-widget">
                            <div class="exam-widget-heading">
                            <span class="exam-widget-tag">
                                <label>Java</label>
                                <label>Android</label>
                            </span>
                            </div>
                            <div class="exam-widget-body">
                                <div class="exam-widget-title">
                                    <a href="#">Android课程考试</a></div>
                                <div class="exam-widget-info">
                                    <i class="fa fa-clock-o"></i>1小时59分钟21秒<span class="pull-right text-info">进行中</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="bg-000">
            <div class="section-title">
                <i class="title-icon title-icon-2-l title-icon-l"></i>实 战 推 荐<i class="title-icon title-icon-2-r title-icon-r"></i>
            </div>
            <div class="container clearfix">
                <div class="row">
                    <div class="per-20-div">
                        <div class="exam-widget">
                            <div class="exam-widget-heading">
                            <span class="exam-widget-tag">
                                <label>Java</label>
                                <label>Android</label>
                            </span>
                            </div>
                            <div class="exam-widget-body">
                                <div class="exam-widget-title">
                                    <a href="#">Android课程考试</a></div>
                                <div class="exam-widget-info">
                                    <i class="fa fa-clock-o"></i>1小时59分钟21秒<span class="pull-right text-info">进行中</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="per-20-div">
                        <div class="exam-widget">
                            <div class="exam-widget-heading">
                            <span class="exam-widget-tag">
                                <label>Java</label>
                                <label>Android</label>
                            </span>
                            </div>
                            <div class="exam-widget-body">
                                <div class="exam-widget-title">
                                    <a href="#">Android课程考试</a></div>
                                <div class="exam-widget-info">
                                    <i class="fa fa-clock-o"></i>1小时59分钟21秒<span class="pull-right text-info">进行中</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="bg-fff">
            <div class="section-title">
                <i class="title-icon title-icon-3-l title-icon-l"></i>实 战 推 荐<i class="title-icon title-icon-3-r title-icon-r"></i>
            </div>
            <div class="container clearfix">
                <div class="row">
                    <div class="per-20-div">
                        <div class="exam-widget">
                            <div class="exam-widget-heading">
                            <span class="exam-widget-tag">
                                <label>Java</label>
                                <label>Android</label>
                            </span>
                            </div>
                            <div class="exam-widget-body">
                                <div class="exam-widget-title">
                                    <a href="#">Android课程考试</a></div>
                                <div class="exam-widget-info">
                                    <i class="fa fa-clock-o"></i>1小时59分钟21秒<span class="pull-right text-info">进行中</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="per-20-div">
                        <div class="exam-widget">
                            <div class="exam-widget-heading">
                            <span class="exam-widget-tag">
                                <label>Java</label>
                                <label>Android</label>
                            </span>
                            </div>
                            <div class="exam-widget-body">
                                <div class="exam-widget-title">
                                    <a href="#">Android课程考试</a></div>
                                <div class="exam-widget-info">
                                    <i class="fa fa-clock-o"></i>1小时59分钟21秒<span class="pull-right text-info">进行中</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <footer class="footer">
        <div class="container">
            <div class="row">
                <div class="site-map">
                    <ul>
                        <li><a href="javascript:">系统简介</a></li>
                        <li><a href="javascript:">广告服务</a></li>
                        <li><a href="javascript:">试用洽谈</a></li>
                        <li><a href="javascript:">网站地图</a></li>
                        <li><a href="javascript:">联系方式</a></li>
                        <li><a href="javascript:">关于我们</a></li>
                    </ul>
                </div>
                <div class="copyright">
                    Copyright © 2017 <a href="javascript:">Gallonce</a> , Inc. All rights reserved.
                </div>
            </div>
        </div>
    </footer>
</div>

<script src="../plugins/jquery/jquery.min.js"></script>
<script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="../plugins/layui/layui.all.js"></script>
<script src="../plugins/validator/validator.min.js"></script>
<script src="../plugins/sweetalert/sweetalert2.all.min.js"></script>

<script src="../js/common.js"></script>
<script>
    (function () {
        var timer = 0;
        $(".menu .item").on('mouseenter',function () {
            var item = $(this);
            var that = this, activeItem = $(".menuContent").find(".js-menu-item-on")[0];
            if(that != activeItem) {
                $(".menu .item").removeClass("active"), item.addClass("active"), $(".submenu").hide();
                var id = item.attr("data-id");
                $(".submenu[data-id='" + id + "']").show();
            }
        });
        $(".menu, .submenu").on('mouseleave', function () {
            $(".menu .item").removeClass("active"), $(".submenu").hide()
        });
        $(".submenu").on('mouseenter', function () {
            $(".submenu").hide();
            var id = $(this).data("id"), item = $(".menu .item[data-id='" + id + "']");
            item.addClass('active');
            $(this).show();
        })
    })();
</script>
</body>
</html>